<template>
  <div class="toolbar">
    <el-icon v-if="isCollapse" style="text-align: left" :size="iconSize" @click="menuCollapse">
      <Expand />
    </el-icon>
    <el-icon v-else :size="iconSize" @click="menuCollapse">
      <Fold />
    </el-icon>
    <div>
      <el-dropdown>
        <el-icon :size="iconSize" style="margin-right: 8px; margin-top: 1px">
          <setting />
        </el-icon>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="enterPersonalCenter">个人中心</el-dropdown-item>
            <el-dropdown-item @click="logOutAndLogIn">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      <span style="font-size: large;">{{loginInformationStore.loginInformation.userName}}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import bus from "../untils/bus";
import { useRouter } from "vue-router";
import { useLoginInformation } from "@/store/loginInformation";

const isCollapse = ref(false);
const iconSize = ref("20px");
const loginInformationStore = useLoginInformation();
console.log(loginInformationStore.loginInformation);
const router = useRouter();
const menuCollapse = () => {
  isCollapse.value = !isCollapse.value;
  bus.emit("isCollapse", isCollapse.value);
};
function logOutAndLogIn() {
  router.push({ path: "/Login" })
}
function enterPersonalCenter() {
  router.push({ path: "/HomePage/PersonalCenter" })
}
</script>

<style scoped>
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  right: 20px;
}
</style>
